<template>
  <div class="box">
    <div class="container" v-for="(item, index) in listArr" :key="index">
      <div class="container_top">
        <div class="logo"></div>
        <div class="logo_right">
          <p style="text-align: right; color: #3291f8">{{ item.name }}</p>
          <p>{{ item.corName }}</p>
        </div>
      </div>
      <div class="container_cen">
        <div
          class="cen_Position"
          v-for="(item1, index1) in item.money"
          :key="index1"
        >
          <div class="cen_name">大数据运维工程师</div>
          <div class="cen_ic">
            <i class="el-icon-chat-dot-round"></i>
            <i class="el-icon-star-off" style="margin-left: 5px"></i>
          </div>
          <div class="cen_allAnd">全</div>
          <div class="cen_money" style="color: #be3327">11-12k</div>
        </div>
      </div>
      <div class="container_btm">
        <div class="btm_btn">更多职位</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "Login",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      listArr: [
        {
          name: "再招66个职位",
          money: [
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
          ],
          corName: "微软科技有限公司",
          details: "",
          id: "1",
        },
        {
          name: "再招66个职位",
          money: [
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
          ],
          corName: "微软科技有限公司",
          details: "",
          id: "1",
        },
        {
          name: "再招66个职位",
          money: [
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
          ],
          corName: "微软科技有限公司",
          details: "",
          id: "1",
        },
        {
          name: "再招66个职位",
          money: [
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
          ],
          corName: "微软科技有限公司",
          details: "",
          id: "1",
        },
        {
          name: "再招66个职位",
          money: [
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
          ],
          corName: "微软科技有限公司",
          details: "",
          id: "1",
        },
        {
          name: "再招66个职位",
          money: [
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
          ],
          corName: "微软科技有限公司",
          details: "",
          id: "1",
        },
        {
          name: "再招66个职位",
          money: [
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
          ],
          corName: "微软科技有限公司",
          details: "",
          id: "1",
        },
        {
          name: "再招66个职位",
          money: [
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
          ],
          corName: "微软科技有限公司",
          details: "",
          id: "1",
        },
        {
          name: "再招66个职位",
          money: [
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
            { money_one: "11-12k", post: "大数据运维工程师", val: "1" },
          ],
          corName: "微软科技有限公司",
          details: "",
          id: "1",
        },
      ],
    };
  },
  // 组件初始化
  created() {},
  // 组件实例挂载完毕
  mounted() {},
  //销毁事件
  destroyed() {},
  // 组件方法
  methods: {},
};
</script>

<style scoped lang="less">
.box {
  width: 1230px;
  min-width: 1230px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
    justify-content:space-between;
  .container:hover {
    border: 1px solid #3291f8;
    box-shadow: 0px 0px 2px 2px #3291f8;
    .logo_right{
      color: #3291f8;
    }
  }
  .container {
    width: 31%;
    min-height: 280px;
    border: 1px solid gray;
    margin-left: 2%;
    border-radius: 10px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;

    // 头部
    .container_top {
      width: 92%;
      margin: auto;
      min-height: 70px;
      display: flex;
      .logo {
        width: 15%;
        height: 70%;
        margin: auto;
        background-image: url("../../../../assets/imgs/wrlogo.png");
        background-size: 100% 100%;
        // border: 1px solid green;
      }
      .logo_right {
        width: 80%;
        height: 70%;
        margin: auto;
        // border: 1px solid greenyellow;
        font-size: 16px;
        font-weight: 600;
      }
    }
    // 中间内容
    .container_cen {
      width: 92%;
      min-height: 140px;
      margin: auto;
      display: flex;
      flex-direction: column;
      .cen_Position {
        width: 100%;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
        display: flex;
        position: relative;

        // 职位名称
        .cen_name {
          max-width: 50%;
          font-size: 14px;
          font-weight: 600;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          height: 100%;
        }
        // 图标
        .cen_ic {
          width: 17%;
          font-size: 20px;
          height: 100%;
          color: #347caf;
          text-align: center;
        }
        // 兼职/全职
        .cen_allAnd {
          width: 12%;
          height: 20px;
          font-size: 13px;
          font-weight: 600;
          line-height: 20px;
          text-align: center;
          margin: auto 0;
          border: 1px solid #aed4ff;
          background-color: #e9f3ff;
          border-radius: 5px;
          color: #3291f8;
        }
        // 薪资
        .cen_money {
          width: 28%;
          height: 100%;
          position: absolute;
          right: 0;
          font-size: 16px;
          font-weight: 600;
          text-align: right;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    // 底部按钮
    .container_btm {
      width: 92%;
      min-height: 70px;
      margin: auto;
      display: flex;
      .btm_btn {
        width: 50%;
        height: 30px;
        border: 1px solid #aed4ff;
        background-color: #e9f3ff;
        border-radius: 5px;
        color: #3291f8;
        font-size: 15px;
        font-weight: 600;
        margin: auto;
        text-align: center;
        line-height: 30px;
      }
    }
  }
  .container:nth-child(3n + 1) {
    margin-left: 0px;
  }
}
</style>
